<template>
  <div class="user-section">
    <van-image
      class="bg"
      :src="userinfo.poster ? userinfo.poster : require('@/assets/user-bg.png')"
      fit="scale-down"
      :error-icon="require('@/assets/user-bg.png')"
    />
    <!-- <img class="bg" :src="userinfo.poster ? userinfo.poster : require('@/assets/user-bg.png')" /> -->
    <div class="user-info-box">
      <div class="portrait-box">
        <van-image
          round
          class="portrait"
          width="56"
          height="56"
          fit="fill"
          :src="userinfo.avatar ? userinfo.avatar : require('@/assets/missing-face.png')"
        />
        <!-- <img class="portrait" :src="userinfo.avatar || require('@/assets/missing-face.png')" /> -->
      </div>
      <div class="info-box">
        <span class="username" v-if="token">{{userinfo.username}}</span>
        <!-- <span class="username go-login" v-else @click="goLogin">立即登录</span> -->
        <van-button class="username login-btn" v-else @click="goLogin" type="default" size="small">立即登录</van-button>
      </div>
    </div>
    <div class="vip-card-box">
      <!-- 背景图 -->
      <div
        :style="{
          background: `url(${require('@/assets/vip-card-bg.png')}) no-repeat right top`,
          height: '100%',
          padding: '20px 24px'
          }"
      >
        <div class="tit">
          <span v-if="unionFlag">
            <van-icon name="vip-card" color="#f6e5a3" size="16px" />至臻会员
          </span>
          <span v-else style="color: rgba(220, 226, 184, 0.7)">普通用户</span>
          <div class="b-btn" @click.self="handleOpen" v-if="!unionFlag">立即开通</div>
        </div>
        <!-- <img class="card-bg" :src="require('@/assets/vip-card-bg.png')" mode /> -->
        <div class="e-m">{{unionFlag?'你好，尊敬的大会员':'快来加入会员吧'}}</div>
        <div class="e-b">享受更多优惠,请查看会员详情。</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Image as VanImage, Toast, Button } from "vant";

Vue.use(VanImage).use(Toast).use(Button);
export default {
  name: "hy-union",
  props: {
    token: {
      type: String,
      required: true
    },
    userinfo: {
      type: Object,
      required: true
    }
  },
  computed: {
    unionFlag() {
      if (this.userinfo.member) {
        if (new Date(this.userinfo.member).getTime() < Date.now()) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    }
  },
  methods: {
    handleOpen() {
      Toast('暂未开通会员业务,敬请期待')
      // console.log("TODO: 追被开通");
    },
    goLogin() {
      this.$router.push({
        name: "User-type",
        params: { type: "login" }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.user-section {
  height: 260px;
  padding: 0 15px;
  position: relative;
  // 背景图
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: blur(1px);
    opacity: 0.7;
  }
  // 个人信息
  .user-info-box {
    height: 90px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    .portrait {
      border: 5px solid #fff;
      border-radius: 50%;
    }
    .username {
      font-size: 16px;
      margin-left: 20px;
      &.go-login {
        color: #004ea1;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 10px 20px;
        border-radius: 14px;
      }
      &.login-btn {
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
      }
    }
  }
  // 会员卡
  .vip-card-box {
    display: flex;
    flex-direction: column;
    color: #f7d680;
    height: 120px;
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0.8)
    );
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    position: relative;

    .card-bg {
      position: absolute;
      top: 20px;
      right: 0;
      width: 190px;
      height: 130px;
    }

    .tit {
      font-size: 15px;
      color: #f7d680;
      margin-bottom: 14px;
      text-align: left;
      .b-btn {
        // 不用定位,而是浮动 => 下拉出现晃动
        float: right;
        margin-right: 10px;
        width: 66px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #36343c;
        border-radius: 20px;
        background: linear-gradient(to left, #f9e6af, #ffd465);
      }
    }
    .e-b,
    .e-m {
      text-align: left;
      font-size: 14px;
    }
    .e-b {
      font-size: 12px;
      color: #d8cba9;
      margin-top: 10px;
    }
  }
}
</style>
